<%--
  Created by IntelliJ IDEA.
  User: Ren
  Date: 2022/10/16
  Time: 21:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>权限页面</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>

<div id="app">

    <div>
        <el-button type="success" @click="addPermission">新增权限</el-button>
    </div>


    <div style="position: absolute;top: 6px;left: 429px;">
        <el-form :inline="true" :model="PermissionVo" class="demo-form-inline">
            <el-form-item label="权限名字">
                <el-input v-model="PermissionVo.pName" placeholder="权限名字"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>


    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :cell-style="styleBack"
                :header-cell-style="getRowClass"
        >


            <el-table-column
                    prop="pId"
                    label="编号"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="pName"
                    label="权限名字"
                    width="100">

                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top"

                    >
                        <p  style="background-color: #042831;color: #32CD99;">权限说明: {{ scope.row.explain }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.pName }}</el-tag>
                        </div>
                    </el-popover>
                </template>


            </el-table-column>

            <el-table-column
                    prop="pid"
                    label="权限级别"
                    width="100">
                <template slot-scope="scope">

                    <el-tag size="small" v-if="scope.row.pid == 0">一级权限</el-tag>
                    <el-tag size="small" v-else-if="scope.row.pid !== 0">二级权限</el-tag>
                    <el-tag size="small" v-else>三级权限</el-tag>

                </template>


            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="info"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>


        </el-table>
    </template>

    <%--分页--%>
    <div style="margin-top: 0.2rem; margin-left: 18.2rem;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,7,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>


    <!--添加的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="添加信息"
            :visible.sync="dialogVisible1"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="addForm" ref="addFormRef">

            <el-form-item label="权限名称" prop="pName">
                <el-input v-model="addForm.pName"></el-input>
            </el-form-item>

            <el-form-item label="父级权限" prop="pid">
                <el-input v-model="addForm.pid"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="qrtj()" :visible.sync="dialogVisible1">确认添加</el-button>
                      </span>
    </el-dialog>


    <!--修改的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="修改提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="editForm">


            <el-form-item label="权限名称" prop="pName">
                <el-input v-model="editForm.pName"></el-input>
            </el-form-item>

            <el-form-item label="父级权限" prop="pid">
                <el-input v-model="editForm.pid"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
                      </span>
    </el-dialog>


</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            explain: "",
            //分页三件套
            currentPage: 1,
            pageSize: 5,
            total: 0,

            PermissionVo: {},
            //添加和修改
            dialogVisible: false,
            dialogVisible1: false,
            //定义添加表单的数据变量
            addForm: {},
            //定义修改表单的数据变量
            editForm: {},
        },
        created() {
            this.intoTable();
        },
        methods: {
            //查询
            onSubmit() {

                this.intoTable();
            },

            //确认添加
            qrtj() {

                this.addForm.pIcon = "el-icon-collection-tag";
                axios.post("/permission/add", this.addForm).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success("添加权限信息成功")
                        //关闭弹出层
                        this.dialogVisible1 = false;
                        //重新加在表格数据
                        this.initTable();
                        this.$refs.addFormRef.resetFields();
                    }
                })
            },
            //新增权限
            addPermission() {

                this.dialogVisible1 = true;
                this.$refs.addFormRef.resetFields();
            },

            //分页设置每页多少条数据
            handleSizeChange(val) {

                this.pageSize = val;
                this.intoTable();

            },

            //当当前页数改变时，查找当前页和当前设置的每页多少条数据
            handleCurrentChange(val) {

                this.currentPage = val
                this.intoTable();
            },
            //初始化数据
            intoTable() {
                axios.post("/permission/all?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.PermissionVo).then(resp => {
                    console.log(resp)
                    this.tableData = resp.data.data.list;
                    let a = new Array();
                    this.tableData.forEach(value => {
                        value.explain = "该医院系统的权限之一";
                        a.push(value)
                    })
                    this.total = resp.data.data.total;
                    this.tableData = a;

                });
            },
            //确认修改
            confirmUpdate() {
                axios.post("/permission/update", this.editForm).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success("修改权限信息成功")
                        //关闭弹出层
                        this.dialogVisible = false;
                        //重新加在表格数据
                        this.intoTable();
                    }
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                //1.显示对话框
                this.dialogVisible = true;
                console.log(row)
                //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                let parse = JSON.parse(JSON.stringify(row));
                this.editForm = parse;
            },


            handleDelete(index, row) {
                console.log(index, row);
                axios.get("/permission/del?pId=" + row.pId).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("删除权限信息成功")
                        //重新加在表格数据
                        this.intoTable();
                    }
                })
            },
            // 表格奇偶层样式
            styleBack({row, column, rowIndex, columnIndex}) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({rowIndex}) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },
        }

    })
</script>
</html>
